<template>
  <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
    <el-form-item prop="username">
		<!-- <img src="../../assets/http_/http_/inputStyle.png" alt=""> -->
		<div class="fontCss">
			用户名
		</div>
      <!-- <el-input v-model="loginForm.username" :prefix-icon="User" :placeholder="$t('app.username')"></el-input> -->
	  <div style="position: relative;"></div>
	    <img   class="imgStyle" src="../../assets/http_/http_/user.svg" alt="">
      <el-input v-model="loginForm.username" :placeholder="$t('app.username')"></el-input>
    </el-form-item>
    <el-form-item prop="password">
		<div class="fontCss">
			密码
		</div>
		<img   class="imgStyle" src="../../assets/http_/http_/key.svg" alt="" >
      <el-input v-model="loginForm.password"  :placeholder="$t('app.password')" style=""  :type="showPassword ? 'text' : 'password'" ></el-input>
	   <div class="eyeStyle">
	  <img
      v-show="!showPassword"
      src="../../assets/http_/http_/eyeclo.svg"
      alt="闭眼图标"
      class="eye-icon"
      @click="togglePassword"
    >
    <img
      v-show="showPassword"
      src="../../assets/http_/http_/eyes.svg"
      alt="睁眼图标"
      class="eye-icon"
      @click="togglePassword"
    >
</div>
	  
	  <!-- <img src="../../assets/http_/http_/eyeclo.svg" alt="">
	  <img src="../../assets/http_/http_/eyes.svg" alt=""> -->
    </el-form-item>
    <el-form-item v-if="captchaVisible" prop="captcha" class="login-captcha">
      <el-input v-model="loginForm.captcha" :placeholder="$t('app.captcha')" :prefix-icon="Key"></el-input>
      <img :src="captchaBase64" @click="onCaptcha" />
    </el-form-item>
    <el-form-item class="login-button">
      <!-- <el-button type="primary" @click="onLogin()">{{ $t('app.signIn') }}</el-button> -->
      <div class="loginStyle" @click="onLogin()">登录</div>
	  
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import { useCaptchaApi, useCaptchaEnabledApi } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import constant from '@/utils/constant'
import { sm2Encrypt } from '@/utils/smCrypto'

const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()
const loginFormRef = ref()
const captchaBase64 = ref()

const loginForm = reactive({
	username: constant.env.PROD ? '' : 'admin',
	password: constant.env.PROD ? '' : 'admin',
	key: '',
	captcha: ''
})

const loginRules = ref({
	username: [{ required: true, message: t('required'), trigger: 'blur' }],
	password: [{ required: true, message: t('required'), trigger: 'blur' }],
	captcha: [{ required: true, message: t('required'), trigger: 'blur' }]
})

// 是否显示验证码
const captchaVisible = ref(false)

onMounted(() => {
	onCaptchaEnabled()
})

const onCaptchaEnabled = async () => {
	const { data } = await useCaptchaEnabledApi()
	captchaVisible.value = data

	if (data) {
		await onCaptcha()
	}
}

const onCaptcha = async () => {
	const { data } = await useCaptchaApi()
	if (data.enabled) {
		captchaVisible.value = true
	}
	loginForm.key = data.key
	captchaBase64.value = data.image
}
 //zqx
const showPassword = ref(false) // 控制密码显示状态
 
// 切换密码可见性
const togglePassword = () => {
  showPassword.value = !showPassword.value
}
const onLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		// 重新封装登录数据
		const loginData = {
			username: loginForm.username,
			password: sm2Encrypt(loginForm.password),
			key: loginForm.key,
			captcha: loginForm.captcha
		}
		localStorage.setItem('WebsiteId', 1)//登录的时候给网站id重置为1也就是鞍钢官网后台管理
		// 用户登录
		userStore
			.accountLoginAction(loginData)
			.then(() => {
				router.push({ path: constant.loginPage })
			})
			.catch(() => {
				if (captchaVisible.value) {
					onCaptcha()
				}
			})
	})
}
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper){

	padding:12px 46px
}
.fontCss{
	color: beige;
}
.imgStyle{
	position: absolute;
	top: 51px;
	left: 18px;
	z-index: 99999;
	cursor: pointer;
}
.el-input{
	background-image: url(../../assets/http_/http_/inputStyle.png);
  background-size: cover;    /* 根据需求调整尺寸 */
  background-position: center;
  background-repeat: no-repeat;
}
.el-input__wrapper{
	background-color: transparent !important; /* 强制设置为透明 */
}
.loginStyle{
	margin-top:30px;
	cursor: pointer;
	width: 320px;
	height: 50px;
	// background-image: url(../../assets/http_/http_/Rectangle\ 2.png);
	// border:1px solid red;
	font-size: 18px;
	text-align: center;
	line-height: 50px;
	color: white;
	border-radius: 18px;
	background: linear-gradient(
    to right,
    rgb(98, 36, 223) 0%,  /* 起始颜色 */
    rgb(105, 115, 252) 100% /* 结束颜色 */

  );
}
.eyeStyle{
	position: absolute;
	top: 47px;
	right: 20px;
}
// .login-captcha {
	
// 	:deep(.el-input) {
	 
// 		width: 200px;
// 	}
// }
// .login-captcha img {
// 	width: 150px;
// 	height: 40px;
// 	margin: 5px 0 0 10px;
// 	cursor: pointer;
// }
// .login-button {
// 	:deep(.el-button--primary) {
// 		border-radius: 50px;
// 		margin-top: 10px;
// 		width: 100%;
// 		height: 45px;
// 		font-size: 18px;
// 		letter-spacing: 8px;
// 	}
// }


</style>
